<template>
  <div class="goodcommentcate clearfix">
    <span :class="{cur:curItem==-1}" @click="selectAll">全部评论</span>
    <span v-for="(item) in datas" :key="item.id" :class="{cur:item.id == curItem}" @click="selectCate(item)">{{item.title}}</span>
  </div>
</template>

<script>
export default {
name:'GoodCommentCategroy',
data(){
  return {
    curItem:-1
  }
},
methods:{
  selectCate(item){
    this.curItem=item.id;
    this.$bus.$emit('selectCate',item.id)
  },
  selectAll(){
    this.curItem=-1;
    this.$bus.$emit('selectAll',-1)
  }
},
props:{
  datas:{
    type:Array
  }
},
mounted(){

  
  
}
}
</script>

<style lang="less" scoped>
.goodcommentcate{
  background-color: #fff;
  padding: 5px;
  span{
    float: left;
    margin-right: 10px;
    margin-bottom: 5px;
    padding: 5px;
  }
  .cur{
    background-color: coral;
    border-radius: 5px;
    color: #ffffff;
  }
}
</style>